import 'package:flutter/material.dart';
import 'package:surfaceim/common/routes/names.dart';
import 'package:surfaceim/common/values/values.dart';
import 'package:surfaceim/common/widgets/widgets.dart';
import 'package:surfaceim/pages/home/view.dart';
import 'package:surfaceim/pages/user/view.dart';

// import 'package:surfaceim/pages/home/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:snapping_sheet/snapping_sheet.dart';

import 'index.dart';

class HomeHeade extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  Widget build(BuildContext context) {
    return GetBuilder<ApplicationController>(
      id: 'application_appBar',
      init: ApplicationController(),
      initState: (_) {},
      builder: (controller) {
        return appBar(
            title: controller.tabTitles[controller.state.page],
            leading: controller.state.page == 0
                ? InkWell(
                    child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(left: 11.w),
                        child: SvgPicture.asset(
                          "assets/icons/shaixuan.svg",
                          width: 34.w,
                          height: 31.w,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 11.w),
                        child: Text(
                          "偏好",
                          style: TextStyle(
                              fontSize: 26.sp, fontWeight: FontWeight.w600),
                        ),
                      )
                    ],
                  ))
                : null,
            isBack: false);
      },
    );
  }
}

class ApplicationPage extends GetView<ApplicationController> {
  // 内容页
  Widget _buildPageView() {
    return PageView(
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        HomePage(),
        Column(
          children: [
            InkWell(
              child: Text('社区'),
              onTap: () {
                Get.toNamed(AppRoutes.Community);
              },
            ),
            InkWell(
              child: Text('注销账号'),
              onTap: () {
                Get.toNamed(AppRoutes.Cancellation);
              },
            ),
            InkWell(
              child: Text('感情观'),
              onTap: () {
                Get.toNamed(AppRoutes.Emotional_Concept);
              },
            ),
            InkWell(
              child: Text('心仪的TA'),
              onTap: () {
                Get.toNamed(AppRoutes.Pure_Fononess);
              },
            ),
            InkWell(
              child: Text('基本信息'),
              onTap: () {
                Get.toNamed(AppRoutes.Base_Info);
              },
            ),
            InkWell(
              child: Text('基本信息 == 选择信息'),
              onTap: () {
                Get.toNamed(AppRoutes.BASIC_INFORMATION);
              },
            ),
          ],
        ),
        UserIndex(),
      ],
      controller: controller.pageController,
      onPageChanged: controller.handlePageChanged,
    );
  }

  Widget _buildBottomNavigationBar() {
    return Obx(() => BottomNavigationBar(
          items: controller.bottomTabs,
          currentIndex: controller.state.page,
          fixedColor: AppColors.primaryElement,
          type: BottomNavigationBarType.fixed,
          onTap: controller.handleNavBarTap,
          showSelectedLabels: false,
          showUnselectedLabels: false,
        ));
  }

  @override
  Widget build(BuildContext context) {
    // double bottomBarHeight = MediaQuery.of(context).padding.bottom; // 底部导航栏的高度
    double bottomBarHeight = 130; // 底部导航栏的高度

    return Scaffold(
      appBar: HomeHeade(),
      body: SnappingSheet(
        snappingPositions: [
          SnappingPosition.pixels(
            positionPixels: 0.0,
            snappingCurve: Curves.easeOutExpo,
            snappingDuration: Duration(milliseconds: 618),
            grabbingContentOffset: GrabbingContentOffset.top,
          ),
          SnappingPosition.pixels(
            snappingCurve: Curves.elasticOut,
            snappingDuration: Duration(milliseconds: 618),
            positionPixels: bottomBarHeight,
          ),

          /// 通顶之拉
          // SnappingPosition.pixels(
          //   grabbingContentOffset: GrabbingContentOffset.bottom,
          //   snappingCurve: Curves.bounceOut,
          //   snappingDuration: Duration(milliseconds: 618),
          //   positionPixels: 100,
          // ),
        ],

        grabbingHeight: 135.h,
        // grabbingHeight: 200.w,
        // 探出部分高度
        lockOverflowDrag: true,
        // 禁止继续拉
        initialSnappingPosition: SnappingPosition.pixels(
          // grabbingContentOffset: GrabbingContentOffset.bottom,
          positionPixels: bottomBarHeight,
        ),
        // 初始高度计算

        /// 中间的东东 // 大概会是两个按钮

        grabbing: GetBuilder<ApplicationController>(
            id: 'application_bottomBar_resBtn',
            init: controller,
            initState: (_) {},
            builder: (_) => Offstage(
                  offstage: controller.state.page != 0,
                  child: Container(
                    color: Colors.yellow.withOpacity(0.5),
                    alignment: Alignment.topCenter,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "占位",
                                style: TextStyle(fontSize: 20.sp),
                              ),
                              Container(
                                height: 10.h,
                              ),
                              Text(
                                "不喜欢",
                                style: TextStyle(fontSize: 30.sp),
                              )
                            ],
                          ),
                          decoration: BoxDecoration(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(128.w)),
                              color: Color.fromRGBO(244, 244, 244, 1)),
                          width: 128.w,
                          height: 128.w,
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 100.w),
                          child: Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "占位",
                                  style: TextStyle(
                                      fontSize: 20.sp, color: Colors.white),
                                ),
                                Container(
                                  height: 10.h,
                                ),
                                Text(
                                  "不喜欢",
                                  style: TextStyle(
                                      fontSize: 30.sp, color: Colors.white),
                                )
                              ],
                            ),
                            decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(128.w)),
                                color: AppColors.primaryElement),
                            width: 128.w,
                            height: 128.w,
                          ),
                        )
                      ],
                    ),
                  ),
                )),

        child: _buildPageView(),

        // sheetAbove: SnappingSheetContent(
        //   draggable: false,
        //   child: Container(
        //       color: Colors.white.withOpacity(0.75), child: _buildPageView()),
        // ),

        /// 寄存 bottombar
        // TODO : 自定义 appbar 全面屏上安全区适配
        sheetBelow: SnappingSheetContent(
          sizeBehavior:
              SheetSizeStatic(size: bottomBarHeight.h, expandOnOverflow: true),
          draggable: false,
          child: Container(
            child: _buildBottomNavigationBar(),
          ),
        ),
      ),
      // bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }
}
